<!DOCTYPE html>
<html lang="en">
<!-- 数组新方法 -->
<!--  
    1、list.findIndex()
    2、list.foreach()
    3、list.some()
    4、list.filter()

    都会对数组进行遍历  foreach不能终止  some和findIndex可以终止
-->


<!-- 过滤器 -->
<!-- 
    过滤器语法：Vue.filter('过滤器名称',function(data){}), data为管道符号前面的数据
    使用位置：  插值表达式和v-bind两个地方
    多个过滤器可以同时使用
 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
</head>

<body>

    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">品牌添加</h3>
            </div>
            <div class="panel-body form-inline">
                <div class="form-group">
                    <label for="id">ID</label>
                    <input type="text" class="form-control" id="id" placeholder="请输入id" v-model="id" v-fontweight="900">
                </div>
                <div class="form-group">
                    <label for="name">NAME</label>
                    <!-- 自定义按键修饰符 -->
                    <input type="text" class="form-control" id="name" placeholder="请输入名称" v-model="name" @keyup.enter="add">
                </div>
                <button type="submit" class="btn btn-primary" @click="add">添加</button>
                <div class="form-group">
                    <label for="param">名称</label>
                    <input type="text" class="form-control" id="param" placeholder="查询条件" v-model="param" @keyup.f2="find" v-focus="'red'">
                </div>
                <button type="submit" class="btn btn-primary" @click="find">搜索</button>
            </div>
        </div>

        <div>
            <table class="table table-striped">
                <tr>
                    <th class="active">ID</td>
                    <th class="success">名称</td>
                    <th class="warning">创建时间</td>
                    <th class="danger">操作</td>
                </tr>

                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.time | dateFormatter}}</td>
                        <td><a @click="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>


    <script>
        // 定义全局过滤器  格式化时间  所有vue实例共享
        Vue.filter('dateFormatter', function (data) {
            var dt = new Date(data);
            var y = dt.getFullYear();
            var m = dt.getMonth() + 1;
            var d = dt.getDate();
            return `${y}-${m}-${d}`;
        })

        // 自定义按键修饰符
        Vue.config.keyCodes.f2 = 113;
        // 自定义全局指令 使用Vue.directive
        // 其中参数1：指令的名称，定义的时候不加v 使用的时候加
        Vue.directive('focus',{
            // 指令绑定到元素上的时候会立即执行  只执行一次
            // 和样式有关的在此设置
            // 参数binding是一个对象 其中：
            /*
                name:指令名 不包括v-前缀
                value:指令的绑定值
                oldValue:指令绑定的前一个值 仅在updated和componentUpdated钩子中可用 无论值是否改变都可用
                expression:绑定值的字符串形式
                arg:传给指令的参数
                modifiers:一个包含修饰符的对象
            */
            bind:function(el,binding){
                // 第一参数永远是el  表示被绑定了指令的元素  el是原生js对象
                // 在元素刚绑定指令时  还没有插入到dom树  此时没有作用
                el.focus(),
                el.style.color=binding.value
            },
            // 元素插入dom中的时候 会执行inserted函数
            // 和行为有关的在此设置
            inserted:function(el){
                el.focus()
            },
            // 当vnode更新的时候 执行 可能会触发多次
            updated:function(el){
                el.focus()
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                param: '',
                list: [
                    { id: 1, name: '奔驰', time: new Date() },
                    { id: 2, name: '宝马', time: new Date() },
                    { id: 3, name: '奥迪', time: new Date() }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name, time: new Date() });
                },
                del(id) {

                    // this.list.some((item,i)=>{
                    //     if(item.id == id) {
                    //         this.list.splice(i,1);
                    //         return true;
                    //     }
                    // })

                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    })
                    this.list.splice(index, 1);
                },
                find() {
                    // 第一种  foreach
                    // var pList = [];
                    // this.list.forEach(item => {
                    //     if(item.name.indexOf(this.param) != -1) {
                    //         pList.push(item);
                    //     }
                    // });
                    // this.list = pList;


                    //第二种  filter
                    this.list = this.list.filter(item => {
                        if (item.name.includes(this.param)) {
                            return item;
                        }
                    })
                }
            },
            // 私有过滤器
            // 调用采用就近原则，私有和全局名称相同时，调用私有过滤器
            filters: {
                dateFormatter: function (data, pattern='') {
                    var dt = new Date(data);
                    var y = dt.getFullYear();
                    var m = dt.getMonth() + 1;
                    var d = dt.getDate();
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`;
                    } else {
                        // 字符串的padStart(maxlength,fillString) 定义规定长度 和 不够长度时怎么填充
                        var hh = dt.getHours().toString().padStart(2,'0');
                        var mm = dt.getMinutes();
                        var ss = dt.getSeconds();
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                    }

                }
            },
            // 自定义私有指令
            directives:{
                'fontweight':function(el,binding){
                    el.style.fontWeight=binding.value
                }
            }
        })

    </script>
</body>

</html>